<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/29
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>控制台</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .panel{
            background-color: white;
            border-top: 3px solid rgb(60,141,188);
            border-radius: 4px;
            height: 65%
        }
        .shortcut{
            height: 150px;
            border-radius: 4px;
        }
        .shortcut:hover{
            opacity: 0.7;
            cursor: pointer;
        }
    </style>
</head>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/echarts.js"></script>
<script src="/js/essos.js"></script>
<body style="background-color: rgb(236,240,245);padding: 10px">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-sm3">
            <div class="layui-bg-red shortcut" onclick="location.href = '/jsp/attendanceManage/attendance.jsp'">
                <span style="font-size: 32px;position: absolute;bottom: 20px;left: 30px">签到</span>
                <i class="layui-icon layui-icon-log" style="font-size: 122px;margin-left: 46%"></i>
            </div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-orange shortcut" onclick="location.href = '/jsp/processManage/newProcess.jsp'">
                <span style="font-size: 32px;position: absolute;bottom: 20px;left: 30px">新建流程</span>
                <i class="layui-icon layui-icon-template-1" style="font-size: 122px;margin-left: 46%"></i>
            </div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-blue shortcut" onclick="location.href = '/jsp/informationManage/notifyList.jsp'">
                <span style="font-size: 32px;position: absolute;bottom: 20px;left: 30px">公告列表</span>
                <i class="layui-icon layui-icon-dialogue" style="font-size: 122px;margin-left: 46%"></i>
            </div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-green shortcut" onclick="location.href = '/jsp/processManage/myProcess.jsp'">
                <span style="font-size: 32px;position: absolute;bottom: 20px;left: 30px">我的申请</span>
                <i class="layui-icon layui-icon-form" style="font-size: 122px;margin-left: 52%"></i>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm9">
            <div id="div_eChart" class="panel"></div>
        </div>
        <div class="layui-col-sm3">
            <h3 id="pnl_time" class="layui-bg-gray"></h3>
            <div id="date"></div>
        </div>
    </div>
</body>
<script>

    $(function () {

        //页面加载完成，设置当前时间
        document.getElementById("pnl_time").innerHTML = new Date().toLocaleString();
        //设置当前时间定时器
        setInterval("pnl_time.innerHTML=new Date().toLocaleString()",1000);

        //发送异步请求获取表格数据
        $.ajax({
            url:'/loginController/getDeptNum.do',
            dataType:'json',
            success:function (result) {
                var data = result.data;

                var dept_names = [];
                var nums = [];
                var len = data.length;
                for (i = 0; i < len; i++){
                    dept_names.push(data[i].dept_name);
                    nums.push(data[i].num);
                }

                //重载表格数据
                myChart.setOption({
                    xAxis: {
                        data: dept_names
                    },
                    visualMap: {
                        max: nums[0]
                    },
                    series: [{
                        data: nums
                    }]
                });
            }
        })
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('div_eChart'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '部门人数排名'
        },
        tooltip: {},
        legend: {
            data:['人数']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        visualMap: {
            min: 0,
            show:false,
            splitNumber: 7,
            color: ['#d94e5d','#eac736','#50a3ba'],
            textStyle: {
                color: '#000'
            }
        },
        series: [{
            name: '人数',
            type: 'bar',
            barWidth:50,//设置柱体宽度
            data: []
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    layui.use('laydate',function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#date',
            position: 'static',
            btns: ['clear', 'now']
        });
    });
</script>
</html>
